import { Button, Popconfirm, Space, Table } from "antd";
import { useEffect } from "react";
import { delcourse } from '../../api/course'
import { useRequest } from "ahooks";
// 定义数据类型
interface Course {
  id: number;
  title: string;
  price: string;
  point: string;
  category: string;
  course_img: string;
  del: string;
}

export default function CourseTable(props: {
  data: Course[];  // 明确指定数据类型
  loading: boolean; // boolean 应该是小写
  reloadData: () => void;
  openModel:(val:Course)=> void;
}) {
  useEffect(() => {
    console.log(props);
  }, [props]);
  const { run,loading } = useRequest((id)=>delcourse(id),{
    manual:true,
    onSuccess:()=>{
        props.reloadData()
    }
  })
  function handleRemove(id:number){
    run(id)
  }
  const columns = [
    { title: '标题', dataIndex: 'title', key: 'title' }, // 修改为中文更合适
    { title: '价格', dataIndex: 'price', key: 'price' },
    { title: '评分', dataIndex: 'point', key: 'point' },
    { title: '分类', dataIndex: 'category', key: 'category' },
    {
      title: '操作', 
      dataIndex: 'action', 
      key: 'action',
      render: (_, record:Course, index:Number) => {
        return (
          <Space>
            <Button type="primary" onClick={()=>props.openModel(record)}>编辑</Button>
            <Popconfirm title="确认删除吗"
                onConfirm={()=>handleRemove(record.id)}>
              <Button danger>删除</Button> {/* 使用 danger 属性而不是 type="danger" */}
            </Popconfirm>
          </Space>
        );
      }
    },
  ];

  return (
    <>
        <Table
            columns={columns}
            dataSource={props.data}  // 使用 props.data 而不是硬编码数据
            rowKey="id"             // 添加 rowKey
            loading={props.loading} // 添加 loading 状态
        />
    </>
  );
}